<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01_CSS显示模式</title>
        <style>
            div{
                width: 100px;
                height:100px;
                border: 5px solid #f00;
                /*显示模式:块级元素
                默认竖着排 可以设置宽高
                */
                display: block;
            }
            span{
                background-color: #ff0;
                width: 200px;
                height: 200px;
                /*显示模式:行内元素
                默认横着排 无法设置宽高 靠内容撑起来*/
                display: inline;
                /*元素的显示默认可以修改*/
                display: block;
            }
            input,button{
                width: 200px;
                height: 200px;
                /*行内块元素:既能横着排,又可以设置宽高*/
                display: inline-block;
            }
            .d2:hover{
                /*悬停时,元素的显示默认修改为消失
                会释放此元素占据的文档流页面布局空间*/
                display: none;
            }

        </style>
    </head>
    <body>
        <div class="d1">111</div>
        <div class="d2">222</div>
        <div class="d3">333</div>
        <hr>
        <span>123456789</span>
        <span>123456789</span>
        <span>123456789</span>

        <input type="text">
        <input type="text">
        <input type="text">

        <button>2222</button>
        <button>3333</button>
        <button>4444</button>
    </body>
</html>